<template>
	<view class="index">
		<view class="nav">
			<view class="" :style="{
				height:statusbarHeight + 'px'
			}">

			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="py-12 px-12 flex items-center justify-between">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/index-title.png"
					class="index-title" mode=""></image>
				<u-icon name="scan" :bold="true" color="#FFF" size="32px" @click="scan"></u-icon>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<view class="py-12 px-12 flex items-center">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/index-title.png"
					class="index-title mr-32" mode=""></image>
				<u-icon name="scan" :bold="true" color="#FFF" size="32px" @click="scan"></u-icon>
			</view>
			<!-- #endif -->

			<view class="px-12 mt-28" @click="$tab.nav(`/pages/search`)">
				<view class="search-wrap round-4 bg-FFF px-20 py-16 flex items-center justify-between">
					<view class="flex items-center">
						<u-icon name="search" color="#000" size="36rpx" :bold="true"></u-icon>
						<view class="ml-12" style="color: #999999;">
							请输入关键词
						</view>
					</view>
					<view class="search-btn text-center text-FFF ">
						搜索
					</view>
				</view>
			</view>
		</view>

		<view class="" style="height: 290rpx;">

		</view>

		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/index-img@2x.png" class="w-full"
			mode="widthFix"></image>

		<view class="content">
			<view class="zone mt-32 relative text-FFF flex justify-around items-center pt-36">
				<view class="flex flex-col items-center aishishang"
					@click="$tab.nav(`/pages/commodity/list?columnType=1`)">
					<view class="text-32 font-500">
						爱时尚
					</view>
					<view class="mt-12 text-36 font-700">
						名品专利区
					</view>
				</view>

				<view class="flex flex-col items-center aiziji" @click="$tab.nav(`/pages/commodity/list?columnType=2`)">
					<view class="text-32 font-500">
						爱自己
					</view>
					<view class="mt-12 text-36 font-700">
						大健康养生
					</view>
				</view>

				<view class="flex flex-col items-center aishenghuo"
					@click="$tab.nav(`/pages/commodity/list?columnType=7&title=百万俱乐部`)">
					<view class="text-32 font-500">
						爱生活
					</view>
					<view class="mt-12 text-36 font-700">
						百万俱乐部
					</view>
				</view>

				<view class="flex flex-col items-center xiangshengqian"
					@click="$tab.nav(`/pages/commodity/list?columnType=4`)">
					<view class="text-32 font-500">
						想省钱
					</view>
					<view class="mt-12 text-36 font-700">
						日常用品区
					</view>
				</view>

				<view class="flex flex-col items-center ganen" @click="$tab.nav(`/pages/index/hatch`)">
					<view class="text-32 font-500">
						品牌中国
					</view>
					<view class="mt-12 text-36 font-700">
						产业孵化专区
					</view>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_jinru.png"
						class="image-36 mt-12" mode=""></image>
				</view>

				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_guangyiguang.png"
					class="gyg g1" mode="" @click="$tab.nav(`/pages/commodity/list?columnType=1`)"></image>
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_guangyiguang.png"
					class="gyg g2" mode="" @click="$tab.nav(`/pages/commodity/list?columnType=2`)"></image>
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_guangyiguang.png"
					class="gyg g3" mode="" @click="$tab.nav(`/pages/commodity/list?columnType=7&title=百万俱乐部`)"></image>
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_guangyiguang.png"
					class="gyg g4" mode="" @click="$tab.nav(`/pages/commodity/list?columnType=4`)"></image>
			</view>

			<view class="flex items-center justify-between mt-32">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/2@3x.png" class="zq-box" mode=""
					@click="$tab.nav(`/pages/commodity/list?columnType=3&title=会员自营`)"></image>
					
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/1@3x.png" class="zq-box" mode=""
					@click="$tab.nav(`/pages/commodity/list?columnType=6&title=0元兑换区`)"></image>
			</view>

			<view class="mt-32 bg-FFF relative" style="height: 972rpx;border-radius: 0 0 24rpx 24rpx;">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/img_shuzibowuguan@2x.png"
					class="w-full" mode="widthFix"></image>
				<view class="shuzi-content px-16">
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" indicator-color="#D8D8D8"
						indicator-active-color="#FF571E">
						<swiper-item v-for="(item,index) in shuziOneTypeList" :key="index">
							<view class="swiper-item">
								<view class="w-full relative" v-for="i in item" :key="i.id"
									@click="$tab.nav(`/pages/index/shuzi?title=${i.name}&code=${i.code}&id=${i.id}`)">
									<image :src="globalConfig.imagePrefix + i.iconUrl" class="w-full" mode="widthFix">
									</image>
									<view class="shuzi-title text-32 font-500 u-line-1 text-FFF">
										{{i.name}}
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="mt-32 bg-FFF relative" style="font-size: 0;">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_paihangbang@2x.png"
					class="w-full" mode="widthFix"></image>
				<view class="rankTabs flex items-end">
					<view class="rankTab text-333 text-32 text-center" v-for="(item,index) in rankTabs" :key="index"
						:class="{
						'selectTab':rankTabIndex == index
					}" @click="rankTabIndex = index,refresh()">
						{{item}}
					</view>
				</view>
				<view class="flex items-center justify-between text-28 px-20" style="color: #9E9E9E;">
					<view class="">
						排行
					</view>
					<view class="">
						商品
					</view>
					<view class="">
						销量
					</view>
				</view>

				<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
					<view class="flex items-center justify-between text-28 px-20 mb-48 mt-32"
						v-for="(item,index) in rankList" :key="index"
						@click="$tab.nav(`/pages/commodity/detail?id=${item.id}&storeId=${item.storeId}`)">
						<image :src="`https://file.fulewanjia.com/fulewanjia/profile/appImages2/rank${index+1}@3x.png`"
							mode="" style="width: 55rpx;height: 46rpx;"></image>
						<view class="flex items-center">
							<image :src="globalConfig.imagePrefix + item.cover" mode=""
								style="width: 220rpx;height: 220rpx;"></image>
							<view class="ml-16 flex flex-col justify-between" style="width: 240rpx;height: 220rpx;">
								<view class="u-line-1">
									{{item.name}}
								</view>
								<view class="text-32 font-700" style="color: #E3392A;">
									{{item.nowPrice}}
								</view>
							</view>
						</view>
						<view class="text-right" style="width: 80rpx;">
							{{item.salesNum}}
						</view>
					</view>
				</s-pull-scroll>


				<!-- 		<view class="mt-32 flex items-center justify-around"
					@click="$tab.nav(`/pages/commodity/list?isChart=${rankTabIndex+1}&title=${rankTabs[rankTabIndex]}`)"
					v-if="rankList.length > 0">
					<view class="shop-more items-center flex justify-around">
						<view class="flex items-center">
							<view class="store-more text-center text-32" style="color: #E54142;">
								查看更多
							</view>
							<u-icon name="arrow-right-double" :bold="true" color="#E54142"></u-icon>
						</view>

					</view>
				</view> -->
				<view class="" style="height: 40rpx;">

				</view>
			</view>

			<!-- 			<view class="store mt-32" style="font-size: 0;" v-if="storeList.length > 0">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/index-store-nav.png"
					class="w-full" mode="widthFix"></image>
				<view class="bg-FFF pb-24 pt-20 text-28">
					<view class="mb-16 py-24 px-12 round-16 w-full flex items-center" v-for="(item,index) in storeList"
						:key="item.id" @click="goDetail(item.id)" style="background-color: #F1F1F1;">
						<image :src="globalConfig.imagePrefix + item.logo" style="width: 176rpx;height: 176rpx;"
							mode="">
						</image>
						<view class="ml-20" style="width: calc(100% - 176rpx);">
							<view class="flex justify-between">
								<view class="u-line-1 text-32" style="width: 80%;">
									{{item.name}}
								</view>
							</view>
							<view class="flex justify-between mt-12">
								<view class="">
									<u-rate :value="5" activeColor="#FF0064" readonly></u-rate>
									<view class="text-gray mt-8" style="padding-left: 4rpx;">
										{{item.linkerMobile | phoneFun}}
									</view>
								</view>
								<view class="flex items-center">
									<image
										src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_dianhua.png"
										mode="" class="image-52" @click.stop="$modal.makePhone(item.linkerMobile)">
									</image>
								</view>
							</view>
							<view class="mt-12 text-gray u-line-1">
								{{item.address}}
							</view>
						</view>
					</view>

					<view class="mt-32 flex items-center justify-around" @click="$tab.nav(`/pages/shops/index`)">
						<view class="shop-more items-center flex justify-around">
							<view class="flex items-center">
								<view class="store-more text-center text-32">
									查看更多
								</view>
								<u-icon name="arrow-right-double" :bold="true" color="#E54142"></u-icon>
							</view>

						</view>
					</view>
				</view>
			</view> -->

			<!-- 			<scroll-view scroll-x>
				<view class="flex items-center mt-32 pb-32">
					<view class="mr-44 text-nowrap text-36 relative font-500" v-for="(item,index) in tabsList"
						:key="index" :class="{
						'select-tab':index == tabsIndex
					}" @click="tabsIndexChange(index)">
						{{item.name}}
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/index-tab-bg.png" mode=""
							class="tab-bg" v-if="index == tabsIndex"></image>
					</view>
				</view>
			</scroll-view>

			<view class="">
				<ProductsList style="width: 100%;" ref="products" :width="686" :params="params"></ProductsList>
			</view> -->
		</view>

		<u-no-network></u-no-network>

		<u-loading-page :loading="loading"
			image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif" icon-size="100"
			loading-text=" " loading-mode="spinner"></u-loading-page>

		<!-- s APP版本更新 -->
		<update ref="myUpdataModel"></update>
		<!-- E APP版本更新-->

		<u-back-top :scroll-top="scrollTop"></u-back-top>

<!-- 		<u-modal :show="payStoreShow" title="支付金额" :showCancelButton="true" @cancel="payStoreShow = false"
			@confirm="payStoreConfirm">
			<view class="slot-content" v-if="payStoreForm">
				<u--input placeholder="请输入支付金额" border="surround" type="number" v-model="payStoreForm.price"></u--input>
			</view>
		</u-modal> -->

		<u-popup :show="redEnvelopeShow" @close="handleRedClose" mode="center" round="16" bgColor="transparent"
		    :closeable="true">
		    <view class="redEnvelope-wrap relative" @click="handleRedClose">
		        <view class="flex flex-col items-center redEnvelope-content">
		            <view class="font-500" style="font-size: 64rpx;">
		                支付成功
		            </view>
		            <view class="redEnvelope-title font-500 mt-32">
		                恭喜您获得获得金积分
		            </view>
		            <view class="redEnvelope-price">
		                {{payStoreGetPrice}}
		            </view>
		            <image src="https://file.fulewanjia.com/fulewanjia/profile/appImages2/kai@2x.png" class="kai"
		                :class="{
						'kai-animation':redEnvelopeAnimation
					}" mode=""></image>
		        </view>
		    </view>
		</u-popup>
		
		<u-popup :show="redEnvelopeEndShow" mode="center" round="16" bgColor="transparent">
		    <view class="redEnvelope-wrap-end">
		
		    </view>
		</u-popup>
        
        
          <Exchange :show="payStoreShow" :form="payStoreForm" @close="payStoreClose"></Exchange>
	</view>
</template>

<script>
	import update from '@/components/update/update'
	import {
		getToken
	} from "@/utils/auth.js"

	export default {
		components: {
			update
		},
		data() {
			return {
				globalConfig: getApp().globalData.config,
				tabsList: [],
				tabsIndex: 0,
				scrollTop: 0,
				loading: false,
				params: {},
				storeList: [],
				payStoreShow: false,
				payStoreForm: null,
                payStoreGetPrice:0,
				statusbarHeight: uni.getSystemInfoSync().statusBarHeight,
				shuziOneTypeList: [],
				rankTabs: [
                    "月销量榜",
					"品质好评榜",
                    "新品飙升榜",
				],
				rankTabIndex: 0,
				rankList: [],

				redEnvelopeShow: false,
				redEnvelopeValue: [],
				redEnvalopeIndex: 1,
				redEnvelopeEndShow: false,
				redEnvelopeAnimation: false
			}
		},
		onLoad(e) {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			
			this.loading = true
			this.getData()
			this.refresh()
			//#ifdef APP
			if (process.env.NODE_ENV === 'development') {
				console.log('开发环境');
			} else {
				this.$nextTick(() => {
					this.$refs.myUpdataModel.updateVersion()
				})
			}
			//#endif
			let q = null
			if (e.q) {
				q = decodeURIComponent(e.q)
			} else if (uni.getStorageSync('q')) {
				q = uni.getStorageSync('q')
				uni.removeStorageSync('q')
			}
			if (q != null) {
				if (getToken()) {
					let tem = q.split('&')
					this.payStoreForm = {
						inviteCode: tem[0].split('?')[1],
						name: tem[1].split('=')[1],
						rate: tem[2].split('=')[1],
						payWay: 0,
						price: "",
                        divideType: 1,
                        storeName: tem[3].split('=')[1],
                        openBalancePay: tem[4].split('=')[1],
					}
					this.$Api.user.bindSuperiorByInviteCode(tem[0].split('?')[1])
					this.payStoreShow = true
				} else {
					uni.setStorageSync('q', q)
					uni.reLaunch({
						url: '/pages/login'
					})
				}
			}
		},
		onShareAppMessage() {
			
		},
		onReady() {},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > 100) {
				this.navBg = '#FFF'
			} else {
				this.navBg = 'transparent'
			}
		},
		// onReachBottom() {
		// 	this.$refs.products.loadList();
		// },
		methods: {
            payStoreClose(jinjifen) {
                this.payStoreShow = false
                if (jinjifen) {
                    this.redEnvelopeShow = true
                    this.payStoreGetPrice = jinjifen
                }
            },
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.rankList = [];
					}

					const res = await this.$Api.index.getProductsList({
						pageNum: pullScroll.page,
						pageSize: 10,
						isChart: this.rankTabIndex + 1
					})

					this.rankList = this.rankList.concat(res.rows);
					if (res.total == 0) {
						pullScroll.empty();
					}

					if (this.rankList.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			handleRedClose() {
                this.redEnvelopeAnimation = true
                setTimeout(() => {
                    this.redEnvelopeShow = false
                    this.redEnvelopeEndShow = true
                    this.redEnvelopeAnimation = false
                    this.redEnvalopeIndex = 2
                    setTimeout(() => {
                        this.redEnvelopeEndShow = false
                    }, 1500)
                }, 2000)
                return
				if (this.redEnvalopeIndex == 1) {
					this.redEnvelopeAnimation = true
					setTimeout(() => {
						this.redEnvelopeShow = false
						this.redEnvelopeEndShow = true
						this.redEnvelopeAnimation = false
						this.redEnvalopeIndex = 2
						setTimeout(() => {
							this.redEnvelopeEndShow = false
							this.redEnvelopeShow = true
						}, 1500)
					}, 2000)
				} else {
					this.redEnvelopeAnimation = true
					setTimeout(() => {
						this.redEnvelopeShow = false
						this.redEnvelopeEndShow = true
						this.redEnvelopeAnimation = false
						setTimeout(() => {
							this.redEnvelopeEndShow = false
						}, 1500)
					}, 2000)
				}
			},
		
			scan() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: (res) => {
						let url = res.result
						if (url.indexOf('https://d.fulewanjia.com') == 0) {
							let tem = url.split('&')
							this.payStoreForm = {
								inviteCode: tem[0].split('?')[1],
								name: tem[1].split('=')[1],
								rate: tem[2].split('=')[1],
								// #ifdef APP
								payWay: 2,
								// #endif
								// #ifdef MP-WEIXIN
								payWay: 0,
								// #endif
								price: "",
                                divideType: 1,
                                storeName: tem[3].split('=')[1],
                                openBalancePay: tem[4].split('=')[1],
							}
							this.payStoreShow = true
						} else {
							this.$modal.msg('暂不支持此APP外的其他二维码!')
						}
					}
				})
			},
			goDetail(id) {
				this.$tab.nav(`/pages/shops/detail?id=${id}`)
			},
			tabsIndexChange(index) {
				this.tabsIndex = index
				this.params = {
					type: this.tabsList[this.tabsIndex].id,
				}
				this.$refs.products.refreshList();
			},
			async getData() {
				// this.$Api.index.storeList({
				// 	pageNum: 1,
				// 	pageSize: 4,
				// 	trade: 2
				// }).then(store => {
				// 	console.log(store)
				// 	this.storeList = store.rows || []
				// })

				const shuzi = await this.$Api.common.typeChildrenAll({
					code: "SHUZIGUAN"
				})
				this.shuziOneTypeList = []
				let temArr = []
				let num = 0
				console.log(shuzi.data.length)
				shuzi.data.forEach((item, index) => {
					if (num == 9) {
						this.shuziOneTypeList.push(temArr)
						temArr = [item]
						num = 1
					} else {
						temArr.push(item)
						num++
						if (index == shuzi.data.length - 1) {
							this.shuziOneTypeList.push(temArr)
						}
					}
				})
				console.log(this.shuziOneTypeList)

				// const tabsList = await this.$Api.common.typeChildrenAll({
				// 	code: "classification"
				// })

				// this.tabsList = [{
				// 		name: "全部商品",
				// 		id: ''
				// 	},
				// 	...tabsList.data
				// ]

				this.loading = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.redEnvelope-wrap {
		width: 628rpx;
		height: 880rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_hongbao@2x.png) no-repeat;
		background-size: 100% 100%;
		padding: 116rpx 0 22rpx 0;
		color: #E9CA9A;
		animation: fadeIn 1.5s forwards;

		.redEnvelope-price {
			font-size: 100rpx;
			font-weight: 700;
			margin-top: 78rpx;
		}

		.kai {
			width: 148rpx;
			height: 148rpx;
			position: absolute;
			left: calc(50% - 74rpx);
			bottom: 158rpx;
		}

		.kai-animation {
			animation: float 2s forwards;
			transform-style: preserve-3d;
		}
	}

	.redEnvelope-wrap-end {
		width: 750rpx;
		height: 750rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/image_linquchenggong@3x.png) no-repeat;
		background-size: 100% 100%;
	}

	@keyframes float {
		from {
			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}

		to {
			transform: rotateX(0deg) rotateY(720deg) rotateZ(0deg);
		}
	}

	/* 定义关键帧 */
	@keyframes fadeIn {
		from {
			right: -72rpx;
		}

		to {
			right: 0rpx;
		}
	}

	.rankTabs {
		height: 80rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages2/rank-bg@3x.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: -40rpx;

		.rankTab {
			width: 33.3%;
			height: 80rpx;
			line-height: 80rpx;
		}

		.selectTab {
			height: 100rpx;
			border-radius: 24rpx 24rpx 0 0;
			background-color: #FFF;
			line-height: 126rpx;
		}
	}

	.shuzi-content {
		width: 100%;
		position: absolute;
		top: 170rpx;
		left: 0;

		.swiper {
			height: 780rpx;
		}

		.swiper-item {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 20rpx;
		}

		.shuzi-title {
			width: 100%;
			height: 52rpx;
			background-color: rgba(0, 0, 0, .5);
			position: absolute;
			left: 0;
			bottom: 0;
			line-height: 52rpx;
			text-align: center;
			border-radius: 0 0 16rpx 16rpx;
		}
	}

	.nav {
		width: 100%;
		height: 290rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/index-nav-bg.png') no-repeat;
		background-size: 100% 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;

		.index-title {
			width: 358rpx;
			height: 48rpx;
		}

		.search-wrap {
			.search-btn {
				width: 144rpx;
				height: 56rpx;
				background: #FD8B24;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				line-height: 56rpx;

			}
		}
	}

	.content {
		padding: 0 20rpx 80rpx 20rpx;
		position: relative;
		z-index: 2;
		width: 100%;

		.notice-s {
			width: 4rpx;
			height: 24rpx;
			background-color: #F1973D;
		}

		.zhixian {
			width: 100%;
			height: 2rpx;
			background-color: #DBD8D2;
		}

		.zq-box {
			width: 346rpx;
			height: 132rpx;
			// background: #FF571E;
			// border-radius: 24rpx 24rpx 24rpx 24rpx;
			// line-height: 132rpx;
		}


		.zone {
			height: 540rpx;
			width: 100%;
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages/index-zone.png) no-repeat;
			background-size: 100% 100%;

			.aishishang {
				position: absolute;
				left: 36rpx;
				top: 40rpx;
				z-index: 1;
			}

			.aiziji {
				position: absolute;
				right: 36rpx;
				top: 40rpx;
				z-index: 1;
			}

			.aishenghuo {
				position: absolute;
				left: 36rpx;
				top: 320rpx;
				z-index: 1;
			}

			.xiangshengqian {
				position: absolute;
				right: 36rpx;
				top: 320rpx;
				z-index: 1;
			}

			.gyg {
				width: 144rpx;
				height: 56rpx;
			}

			.g1 {
				position: absolute;
				left: 28rpx;
				top: 166rpx;
				z-index: 1;
			}

			.g2 {
				position: absolute;
				right: 28rpx;
				top: 166rpx;
				z-index: 1;
			}

			.g3 {
				position: absolute;
				left: 28rpx;
				top: 446rpx;
				z-index: 1;
			}

			.g4 {
				position: absolute;
				right: 28rpx;
				top: 446rpx;
				z-index: 1;
			}
		}

		.store {
			.store-more {
				color: #E54142;
			}
		}


		.tab-bg {
			width: 84rpx;
			height: 40rpx;
			position: absolute;
			left: calc(50% - 42rpx);
			bottom: -10rpx;
		}

		.select-tab {
			font-weight: 700;
			background-image: linear-gradient(to bottom,
					#ff561d,
					#ff0064);
			/* 从左到右的红色至黄色线性渐变 */
			background-clip: text;
			-webkit-background-clip: text;
			/* Safari/Chrome特定样式，将渐变应用于文字区域 */
			-webkit-text-fill-color: transparent;
		}
	}

	.shop-more {
		width: 426rpx;
		height: 68rpx;
		background: #F1F1F1;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}
</style>